@charset "utf-8";
@import "reset";
@function r($px){
    @return $px/100+rem;
}
html , body{
    height: 100%;
}
.mobile{
    header{
        width: 100%;
        height: 0.89rem;
        background-color: red;
        overflow: hidden;
        .login{
            margin-top: r(28);
            margin-left: r(23);
            li{
                width: r(30);
                height: r(4);
                line-height: r(4);
                background-color: white;
                color: white;
                margin-top: r(6);
                font-size: r(12);
                position:relative; 
                &::before{
                    position: absolute;
                    top: 0;
                    left: r(-7);
                    display: inline-block;                    
                    content: "";
                    width: r(4);
                    height: r(4);
                    background-color: white;
                }
            }
        }
        .logo{
            float: left;
            width: r(264);
            height: r(39);
            font-size: 0;
            margin-top: r(-30);
            margin-left: r(174);
            img{
                width: 100%;
            }
        }
        .search{
            float: right;
            width: r(43);
            height: r(43);
            overflow: hidden;
            font-size: 0;
            margin-right: r(17);
            margin-top: r(-25);
            img{
                width: 100%;
            }
        }
    }
    section{
        .swiper-container{
            width: 100%;
            height: r(355);
            min-width: r(640);
        }
        .swiper-wrapper{
            width: 100%;
            height: r(355);
        }
        .swiper-slide{
            width: 100%;
            height: r(355);
        }
        .swiper-slide img{
            width: 100%;
        }
    }
    .boddy{
        width: r(584);
        margin: r(30) auto 0;
        font-size: 0;
        .cjk{
            width: 100%;
            overflow: hidden;
            position: relative;
            >span{
                width: r(326);
                font-size: r(26);
                display: block;
                float: left;
                color: black;
            }
            .xin{
                width: r(326);
                float: left;
                position: absolute;
                bottom: 0;
                .xin_img{
                    width: r(19);
                    float: left;
                    height: r(17);
                    img{
                        width: 100%;
                    }
                }
                >span{
                    width: r(30);
                    font-size: r(17);
                    line-height: r(17);
                    float: left;
                    color: #c5c5c5;
                }
                .anli{
                    span{
                        color: #C5C5C5;
                        float: right;
                    }
                    span:nth-of-type(1){
                        font-size: r(20);
                    }
                    span:nth-of-type(2){
                        font-size: r(22);
                    }
                }
            }
            .cjk_img{
                width: r(208);
                height: r(118);
                float: right;
                img{
                    width: 100%;
                }
            }
        }
        hr{
            width: r(584);
            margin: r(20) auto;
        }
        .loginBox_heng{
            width: 100%;
            height: r(25);
            background-color: #f5f5f5;
            margin-top: r(20);
        }
    }
    .loginBox_cjk{
        width: r(583);
        overflow: hidden;
        margin: r(30) auto 0;
        p{
            font-size: r(25);
        }
        .loginBox_cjk_img{
            width: r(188);
            height: r(123);
            float: left;
            img{
                width: 100%;
            }
        }
        .up{
            margin: 0 r(9);
        }
        .loginBox_cjk_foot{
            width: 100%;
            font-size: 0;
            float: left;
            margin-top: r(10);
            overflow: hidden;
            .loginBox_cjk_foot_touxiang{
                width: r(27);
                height: r(27);
                float: left;
                margin-right: r(4);
                img{
                    width: 100%;
                }
            }
            span{
                font-size: r(20);
                float: left;
                color: #c5c5c5;
            }
            .loginBox_cjk_foot_liuyan{
                width: r(19);
                height: r(16);
                float: left;
                margin: r(4) r(4) 0 r(18);
                img{
                    width: 100%;
                }
            }
            .anli{
                    span{
                        color: #C5C5C5;
                        float: right;
                    }
                    span:nth-of-type(1){
                        font-size: r(20);
                    }
                    span:nth-of-type(2){
                        font-size: r(22);
                    }
                }
        }
    }
    .more{
        width: 100%;
        margin-bottom: r(112);
        p{
            text-align: center;
            font-size: r(22);
            color: #C5C5C5;
        }
    }
}
//底部导航栏
footer{
    position: relative;
    .footer_div{
        width: 100%;
        height: r(95);
        border-top: r(1) solid #bbb9ba;
        position: fixed;
        bottom: 0;
        font-size: 0;
        background-color: #f5f5f5;
        .footer_div_daohang{
            width: 20%;
            float: left;
            .footer_div_daohang_img{
                width: r(47);
                height: r(38);
                margin: r(12) auto 0;
                img{
                    width: 100%;
                }
            }
            span{
                color: #8b8b8b;
                font-size: r(18);
                text-align: center;
                display: block;
                margin-top: r(12);
            }
        }
    }
}

//搜索弹窗
//.sousuos{
//  position: fixed;
//  width: 100%;
//  height: 100%;
//  top: 0;
//  background-color: wheat;
//  transform: translateX(100%);
//  z-index: 999;
//}


//登陆窗口
#check{
    display: none;
}
#check:checked ~ .loginBox{
    transform: translateX(0);
}
.loginBox{
    z-index: 99;
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    background-color: #222222;
    transform: translateX(-100%);
    transition: 0.5s;
    .back{
        position: absolute;
        top: r(32);
        left: r(23);
        width: r(43);
        height: r(43);
        background-color: #b60005;
        font-size: r(40);
        color: white;
        text-align: center;
        line-height: r(38);
        border-radius: 50%;
        display: inline-block;
    }
    hr{
        width: r(611);
        margin-top: r(90);
        border: 1px solid #434343;
    }
    .loginBox_img{
        width: r(130);
        height: r(130);
        margin: r(85) auto 0;
        img{
            width: 100%;
        }
    }
    .loginBox_test{
        color: white;
        font-size: r(25);
        text-align: center;
    }
    .loginBox_heng{
        width: 100%;
        height: r(25);
        background-color: #303030;
        margin-top: r(90);
    }
    ul{
        width: r(575);
        margin: 0 auto;
        display: block;
        li{
            #yc{
                display: none;
            }
            #yc:checked ~ .loginBox_yc{
                display: block;
            }
            .loginBox_GIMC{
                width: 100%;
                display: block;
                height: r(90);
                border-bottom: r(1) solid #303030;
                position: relative;
                >span{
                    font-size: r(18);
                    position: absolute;
                    top: 50%;
                    transform: translateY(-50%);
                    color: white;
                }
                span:nth-of-type(1){
                    float: left;
                }
                span:nth-of-type(2){
                    float: right;
                    right: 0;
                }
            }
            .loginBox_yc{
                width: 60%;
                display: none;
                margin: 0 auto;
                p{
                    text-align: center;
                    font-size: r(18);
                    line-height: r(50);
                    color: white;
                }
                p:nth-of-type(1){
                    border-bottom: r(1) solid #303030;
                }
            }
        }
    }
}



//输入密码
#dl{
    display: none;
}
#dl:checked ~ .Land{
    display: block;
}
.Land{
    z-index: 991;
    display: none;
    width: 100%;
    height: 100%;
    position: fixed;
    background-color: #222222;
    top: 0;
    .back{
        position: absolute;
        top: r(32);
        left: r(23);
        width: r(43);
        height: r(43);
        background-color: #b60005;
        font-size: r(40);
        color: white;
        text-align: center;
        line-height: r(38);
        border-radius: 50%;
        display: inline-block;
    }
    hr{
        width: r(611);
        margin-top: r(90);
        border: 1px solid #434343;
    }
    .Land_logo{
        width: r(161);
        height: r(136);
        margin: r(194) auto r(30);
        img{
            width: 100%;
        }
    }
    .Land_user{
        width: r(492);
        height: r(53);
        background-color: #3d3d3d;
        margin: r(16) auto;
        position: relative;
        overflow: hidden;
        .Land_user_img{
            width: r(61);
            float: left;
            height: r(53);
            position: relative;
            background-color: #303030;
            img{
                width: 100%;
                position: absolute;
                top: 0;
            }
        }
        input{
            position: absolute;
            top: 50%;
            width: r(350);
            transform: translateY(-50%);
            left: r(80);
            border: none;
            background-color: #3d3d3d;
            color: #cdcdcd;
        }
    }
    .Land_pass{
        font-size: 0;
        width: r(492);
        margin: 0 auto;
        position: relative;
        .Land_pass_img{
            width: r(19);
            float: right;
            height: r(19);
            position: absolute;
            top: 50%;
            right: r(100);
            transform: translateY(-50%);
            img{
                width: 100%;
            }
        }
        span{
            float: right;
            color: white;
            font-size: r(20);
        }
    }
    .Land_denglu{
        font-size: 0;
        div{
            border:r(1) solid red; 
            width: r(492);
            height: r(53);
            margin: r(14) auto 0;
            position: relative;
            span{
                color: white;
                position: absolute;
                left: 50%;
                transform: translateX(-50%);
                margin-top: r(10);
                font-size: r(22);
                text-align: center;
                display: block;
            }
        }
        div:hover{
            background-color: red;
        }
    }
}


//登陆成功
#yy{
    display: none;
}
#yy:checked ~ .yes{
    display: block;
}

#tuichu{
    display: none;
}

#outer{
    display: none;
}

.yes{
    z-index: 992;
    display: none;
    position: fixed;
    width: 100%;
    overflow:  hidden;
    height: 100%;
    background-color: #222222;
    top: 0;
    .back{
        position: absolute;
        top: r(32);
        left: r(23);
        width: r(43);
        height: r(43);
        background-color: #b60005;
        font-size: r(40);
        color: white;
        text-align: center;
        line-height: r(38);
        border-radius: 50%;
        display: inline-block;
    }
    hr{
        width: r(611);
        margin-top: r(90);
        border: 1px solid #434343;
    }
    .touxiang{
        width: r(134);
        height: r(130);
        margin: 0 auto;
        img{
            width: 100%;
        }
    }
    .chenxiaoming{
        margin-top: r(15);
        width: 100%;
        font-size: 0;
        display: block;
        text-align: center;
        span{
            color: white;
        }
        span:nth-of-type(1){
            font-size: r(25);
        }
        span:nth-of-type(2){
            font-size: r(15);
            border: r(1) solid white;
            margin-left: r(10);
        }
    }
    .xing{
        width: r(84);
        font-size: 0;
        margin: r(8) auto 0;
        .xingxing{
            width: r(21);
            height: r(20);
            float: left;
            display: block;
            text-align: center;
            img{
                width: 100%;
            }
        }
    }
    .guanzhu{
        width: 100%;
        float: left;
        p{
            color: white;
            font-size: r(13);
            text-align: center;
        }
    }
    .shouchang{
        width: 100%;
        font-size: 0;
        div{
            width: r(220);
            height: r(52);
            float: left;
            border-radius: r(60);
            position: relative;
            margin-top: r(20);
            background-color: #cdcdcd;
            &:hover{
                background-color: #B60005;
            }
            span{
                display: block;
                margin-left: r(58);
                color: white;
                position: absolute;
                top: 50%;
                transform: translateY(-50%);
                font-size: r(24);
            }
        }
        div:nth-of-type(1){
            margin-left: r(90);
            margin-right: r(20);
        }
    }
    .loginBox_heng{
        width: 100%;
        height: r(25);
        background-color: #303030;
        margin-top: r(160);
    }
    ul{
        width: r(575);
        margin: 0 auto;
        display: block;
        li{
            #yq{
                display: none;
            }
            #yq:checked ~ .loginBox_yq{
                display: block;
            }
            .loginBox_GIMC{
                width: 100%;
                display: block;
                height: r(90);
                border-bottom: r(1) solid #303030;
                position: relative;
                >span{
                    font-size: r(18);
                    position: absolute;
                    top: 50%;
                    transform: translateY(-50%);
                    color: white;
                }
                span:nth-of-type(1){
                    float: left;
                }
                span:nth-of-type(2){
                    float: right;
                    right: 0;
                }
            }
            .loginBox_yq{
                width: 60%;
                display: none;
                margin: 0 auto;
                p{
                    text-align: center;
                    font-size: r(18);
                    line-height: r(50);
                    color: white;
                }
                p:nth-of-type(1){
                    border-bottom: r(1) solid #303030;
                }
            }
        }
    }
    .out{
        width: r(180);
        height: r(52);
        font-size: 0;
        background-color: red;
        border-radius: r(60);
        position: relative;
        margin: r(20) auto 0;
        span{
            color: white;
            font-size: r(20);
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            margin-left: r(70);
        }
    }
}
